<template>
  <a-modal v-model="dialogVisible" width="1400px" title="所属配置计划" @cancel="handleCancel" @ok="handleOk" okText="确定">
    <b-table ref="modalTtable" bordered :columns="columns" :request="tableData" :selectConfig="{ use: true, type: 'radio', rowKey: 'id' }" @row-click="hanldeRadioClick"> </b-table>
    <div></div>
  </a-modal>
</template>

<script>
import BTable from '@/components/BComponents/BTable'
import { queryConfigProjectChoosePage } from '@/api/quality/projectMeterageEquipmentAccount'
import moment from 'moment';
export default {
  components: { BTable },
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    form: Object
  },
  data() {
    return {
      dialogVisible: false,
      selectedRowKey: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          customRender: (text, row , index) => index+1
        },
        {
          title: '设备名称',
          width: '120px',
          dataIndex: 'mdName'
        },
        {
          title: '规格型号',
          width: '120px',
          dataIndex: 'specificationModel'
        },
        {
          title: '计划进场时间',
          width: '100px',
          dataIndex: 'planInTime',
          customRender: text => {
            return (
              text && moment(text).locale('zh-cn').format('YYYY-MM-DD')
            )
          }
        },
        {
          title: '计划设备数量（个）',
          dataIndex: 'planMdCount',
          children: [
            {
              title: '总数',
              dataIndex: 'planMdTotal',
              width: 150,
              scopedSlots: { customRender: 'planMdTotal' }
            },
            {
              title: '自有设备数量',
              dataIndex: 'ownMdNum',
              width: 150,
              scopedSlots: { customRender: 'ownMdNum' }
            },
            {
              title: '分包设备数量',
              dataIndex: 'thirdMdNum',
              width: 150,
              scopedSlots: { customRender: 'thirdMdNum' }
            },
          ]
        },
        {
          title: '落实设备数量（个）',
          dataIndex: 'executeMdCount',
          children: [
            {
              title: '总数',
              dataIndex: 'executeMdTotal',
              width: 150,
            },
            {
              title: '自有设备数量',
              dataIndex: 'executeOwnMdNum',
              width: 150,
            },
            {
              title: '分包设备数量',
              dataIndex: 'executeThirdMdNum',
              width: 150,
            },
          ]
        },
      ],
      selectedRadio: {}, //table选中数据
      searchDatas: {}, // 查询参数
      tableData: parameter => {
        const queryParam = {
          mdId: this.form.mdId,
          mdModelId: this.form.mdModelId,
          mdName: this.form.mdName,
          specificationModel: this.form.specificationModel,
          projectSet: [this.form.projectId]
        }
        let { pageNo, pageSize } = parameter
        let params = {
          pageNum: pageNo,
          pageSize
        }
        const requestParameters = Object.assign({}, params, { param: queryParam })
        return queryConfigProjectChoosePage(requestParameters)
          .then(res => {
            this.loading = false
            if (res.code === '0') {
              return { code: 200, data: res.data?.list, totalSize: res.data?.total }
            }
          })
          .catch(err => {
            this.loading = false
          })
      }
    }
  },
  created() {},
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 表单取消
     **/
    handleCancel(e) {
      this.$emit('handelShow', false)
      this.selectedRadio = {}
    },
    /**
     * 表单确认
     **/
    handleOk(e) {
      this.$emit('handleClick', this.selectedRadio)
      this.$emit('handelShow', false)
      this.selectedRadio = {}
    },
    /**
     * @description: 搜索
     **/
    search(value) {
      this.searchData = value || {}
      this.$refs.modalTtable.getData(null, true)
    },
    /**
     * @description: 单选项目
     **/
    hanldeRadioClick(e, d) {
      this.selectedRadio = d
    }
  }
}
</script>

<style scoped></style>
